<template>
	<view>
		<view class="u-page">
			<u-tabs class="tab-head" :list="listTab" :is-scroll="false" :current="currentTab" @change="changeTab" 
				inactive-color="#ffffff" active-color="#fcbd71" bg-color="#2B85E4"></u-tabs>
			<view v-show="currentTab === 0">
				<view class="list-head">
					<view class="u-flex">
						<view :class="type == 0 ? 'list-content-select' : 'list-content-unselect'" @tap="changeType(0)">
							<view >支出</view>
							<view class="list-head-content" v-if="myConfig.showTotal">{{monthTotal.out}}</view>
							<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
						</view>
						<view :class="type == 1 ? 'list-content-select' : 'list-content-unselect'"  @tap="changeType(1)" ref="in">
							<view >收入</view>
							<view class="list-head-content" v-if="myConfig.showTotal">{{monthTotal.in}}</view>
							<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
						</view>
						<view class="u-flex-3 u-text-center">
							<view class="u-flex-3 u-text-center" @tap="show = true">
								<view >{{year}}</view>
								<view class="list-head-content" >{{month}}<u-icon style="font-size:20rpx" name="arrow-down-fill"></u-icon></view>
								<u-picker v-model="show" mode="time" :params="params" @confirm="confirmTime"></u-picker>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 120px;">
					<view>
						<view class="qiun-columns">
							<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
								<view class="qiun-title-dot-light">每日记录</view>
							</view>
							<view class="qiun-charts" >
								<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
							</view>
						</view>
					</view>
					<view>
						<view class="qiun-columns">
							<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
								<view class="qiun-title-dot-light">分类统计</view>
							</view>
							<view class="qiun-charts" >
								<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
							</view>
						</view>
					</view>
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
						<view class="qiun-title-dot-light">明细列表</view>
					</view>
					<view v-for="(item, index) in typeInfoList" :key="index">
						<view class="u-flex" @click="getTatil(item)">
							<view class="u-flex-2" style="font-size: 32rpx; ">
								<u-icon :name="item.typeIcon" custom-prefix="custom-icon" 
									style="font-size: 50rpx; padding: 15rpx 5rpx 15rpx 25rpx; color:#2979FF"></u-icon>
								<span style="padding-left: 10rpx;" >{{item.name}}</span>
							</view>
							<view class="u-flex-5 u-text-right" style="font-size: 25rpx; padding-right: 30rpx;">
								<span style="color: #DD6161; padding-right: 20rpx;" v-show="item.type === 0">-{{item.data}}</span>
								<span style="color: #18B566; padding-right: 20rpx;" v-show="item.type === 1">+{{item.data}}</span>
								<u-line-progress active-color="#2979ff" v-show="item.type === 0" :percent="parseInt((item.data/monthTotal.out)*10000)/100"></u-line-progress>
								<u-line-progress active-color="#2979ff" v-show="item.type === 1" :percent="parseInt((item.data/monthTotal.in)*10000)/100"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="currentTab === 1">
				<view class="list-head">
					<view class="u-flex">
						<view class="list-content-unselect" >
							<view >支出</view>
							<view class="list-head-content" v-if="myConfig.showTotal">{{yearTotal.out}}</view>
							<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
						</view>
						<view class="list-content-unselect" >
							<view >收入</view>
							<view class="list-head-content" v-if="myConfig.showTotal">{{yearTotal.in}}</view>
							<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
						</view>
						<view class="list-content-unselect" >
							<view >结余</view>
							<view class="list-head-content" v-if="myConfig.showTotal">{{yearTotal.remain}}</view>
							<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
						</view>
						<view class="u-flex-3 u-text-center">
							<view class="u-flex-3 u-text-center" @tap="showYear = true">
								<view class="list-head-content">{{yearYear}}<u-icon style="font-size:20rpx" name="arrow-down-fill"></u-icon></view>
								<u-picker v-model="showYear" mode="time" :params="paramsYear" @confirm="confirmTimeYear"></u-picker>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 120px;">
					<view class="u-flex" style="padding: 10rpx 10rpx 10rpx 10rpx; font-size: 35rpx; font-weight: bold;">
						<view class="u-flex-4 u-text-center" style="font-size: 32rpx; font-weight: bold;">
							<span style="padding-left: 10rpx;" >月份</span>
						</view>
						<view class="u-flex-3 u-text-right" >
							<span style="color: #DD6161; padding-right: 20rpx;" >支出</span>
						</view>
						<view class="u-flex-3 u-text-right" >
							<span style="color: #2979ff; padding-right: 20rpx;">收入</span>
						</view>
						<view class="u-flex-3 u-text-right" >
							<span style="color: #19be6b; padding-right: 20rpx;">结余</span>
						</view>
					</view>
					<u-line color="#2979ff"/>
					<view v-for="(item, index) in monthList" :key="index">
						<view class="u-flex" style="padding: 10rpx 10rpx 10rpx 10rpx; font-size: 32rpx;">
							<view class="u-flex-4 u-text-center" >
								<span style="padding-left: 10rpx;" >{{item.month}}</span>
							</view>
							<view class="u-flex-3 u-text-right" >
								<span style="color: #DD6161; padding-right: 20rpx;" >-{{item.out}}</span>
							</view>
							<view class="u-flex-3 u-text-right" >
								<span style="color: #2979ff; padding-right: 20rpx;">{{item.in}}</span>
							</view>
							<view class="u-flex-3 u-text-right" >
								<span style="color: #19be6b; padding-right: 20rpx;">{{item.remain}}</span>
							</view>
						</view>
						<u-line color="#82848a"/>
					</view>
				</view>
			</view>
			
			<u-popup v-model="showTatil" mode="center" border-radius="15" width="90%" height="60%">
					<view class="u-flex" style="padding: 10rpx 10rpx 10rpx 10rpx">
						<u-icon :name="tempItem.typeIcon" custom-prefix="custom-icon"
							style="font-size: 50rpx; padding: 15rpx 5rpx 15rpx 25rpx; color:#2979FF"></u-icon>
						<view class="u-flex-6" style="font-size: 32rpx; font-weight: 700;">
							{{tempItem.name}}明细
						</view>
					</view>
					<view  v-for="(item, index) in tatilList" :key="index" :class="{itemclassb : index%2===1}"  style="padding: 3rpx 30rpx 0rpx 25rpx">
						<view class="u-flex">
							<view class="u-flex-6" style="font-size: 32rpx; ">
								<span style="padding-left: 10rpx; font-size:25rpx" >{{item.dayName}}</span>
								<span style="padding-left: 50rpx; font-size:25rpx" >{{item.remark}}</span>
							</view>
							<view class="u-flex-6 u-text-right" style="font-size: 25rpx; ">
								<span style="color: #DD6161; padding-right: 20rpx;" v-show="item.type === 0">-{{item.money}}</span>
								<span style="color: #18B566; padding-right: 20rpx;" v-show="item.type === 1">+{{item.money}}</span>
							</view>
						</view>
					</view>
			</u-popup>
			
		</view>
		<!-- 自定义tabbar -->
		<xm-tabbar></xm-tabbar>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaColumn=null;
	var canvaRing=null;
	
	export default {
		data() {
			return {
				monthTotal : {},
				barInfo : {},
				pieInfo : [],
				typeInfoList : [],
				yearTotal : {},
				monthList : [],
				show: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				time: new Date(),
				month: "XX月",
				year: "XX年",
				listTab: [{
						name: '统计'
					}, {
						name: '账单'
					}],
				currentTab: 0,
				type: 0,
				showYear: false,
				paramsYear: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				timeYear: new Date(),
				yearYear: "XX年",
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				showTatil:false,
				tempItem: '',
				tatilList: []
			}
		},
		onShow(){
			this.init();
		},
		onLoad(){
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
		},
		methods:{
			init(){
				// 处理现实的时间
				this.year = this.$u.timeFormat(this.time, "yyyy年");
				this.month = this.$u.timeFormat(this.time, "mm月");
				this.yearYear = this.$u.timeFormat(this.timeYear, "yyyy年");
				
				this.monthTotal = this.xmU.getMonthTotal(this.recordList, this.time, [this.myConfig.userId]);
				this.barInfo = this.xmU.getBarInfo(this.recordList, this.type, this.time, [this.myConfig.userId]);
				this.typeInfoList = this.xmU.getTypeInfoList(this.recordList, this.type, this.time, [this.myConfig.userId]);
				this.pieInfo = this.xmU.getPieInfo(this.recordList, this.type, this.time, [this.myConfig.userId]);
				this.yearTotal = this.xmU.getYearTotal(this.recordList, this.timeYear, [this.myConfig.userId]);
				this.monthList = this.xmU.getMonthList(this.recordList, this.timeYear, [this.myConfig.userId]);
				this.showColumn();
				this.showRing();
			},
			// 显示柱状图
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: "canvasColumn",
					type: 'column',
					legend:{show:false},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: this.barInfo.dayList,
					series: [{"name":"1", "data" : this.barInfo.moneyList}],
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						// disabled:true
					},
					dataLabel: false,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.cWidth*_self.pixelRatio*0.45/this.barInfo.dayList.length
						}
					  }
				});
			},
			// 显示柱状图
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + '号 ' + item.data.value + '元'
						}else{
							return category + '号 ' + item.data + '元'
						}
					}
				});
			},
			// 更新柱状图
			changeColumnData() {
				canvaColumn.updateData({
					series: [{"name":"1", "data" : this.barInfo.moneyList}],
					categories: this.barInfo.dayList
				});
			},
			// 显示饼图
			showRing(canvasId,chartData){
				canvaRing=new uCharts({
					$this:_self,
					canvasId: "canvasRing",
					type: 'ring',
					fontSize:11,
					legend:true,
					extra: {
						pie: {
						  offsetAngle: -45,
						  ringWidth: 40*_self.pixelRatio,
						  labelWidth:15
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: this.pieInfo,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
			// 显示饼图
			touchRing(e){
				canvaRing.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			},
			// 更新饼图
			changeRingData() {
				canvaRing.updateData({
					series: this.pieInfo
				});
			},
			// 补充记录信息的数据（icon/记录名称）
			
			// 修改月份
			confirmTime(val){
				this.time = new Date(val.year, val.month, 0);
				this.flashData();
			},
			// 修改年
			confirmTimeYear(val){
				this.timeYear = new Date(val.year, 1, 0);
				this.yearYear = this.$u.timeFormat(this.timeYear, "yyyy年");
				this.monthList = this.xmU.getMonthList(this.recordList, this.timeYear, [this.myConfig.userId]);
			},
			// 修改tab
			changeTab(index){
				this.currentTab = index;
			},
			// 点击支出收入
			changeType(type){
				this.type = type;
				this.flashData();
			},
			// 重新获取数据
			flashData(){
				this.year = this.$u.timeFormat(this.time, "yyyy年");
				this.month = this.$u.timeFormat(this.time, "mm月");
				this.monthTotal = this.xmU.getMonthTotal(this.recordList, this.time, [this.myConfig.userId]);
				this.barInfo = this.xmU.getBarInfo(this.recordList, this.type, this.time, [this.myConfig.userId]);
				this.typeInfoList = this.xmU.getTypeInfoList(this.recordList, this.type, this.time, [this.myConfig.userId]);
				this.pieInfo = this.xmU.getPieInfo(this.recordList, this.type, this.time, [this.myConfig.userId]);
				this.changeColumnData();
				this.changeRingData();
			},

			getTatil(item){
				this.tempItem = item;
				this.tatilList = this.xmU.getTatil(this.recordList, this.type, this.time, item.typeCode, [this.myConfig.userId],[this.myConfig.userId]);
				this.showTatil = true;
			} 
			

		}
	}
</script>

<style>
.list-head{
	background-color: #2B85E4; 
	padding: 30rpx 10rpx 10rpx 10rpx;
	font: small-caps bold 25rpx serif;
	color: #FFFFFF;
	width: 100%;
	position: fixed;
	top: 42px;
	z-index: 1000;
}
.tab-head{
	width: 100%;
	height: 42px;
	position: fixed;
	top: 0;
	z-index: 1000;
}
.list-head-content{
	padding: 10rpx 0rpx 0rpx 10rpx;
	font: small-caps bold 40rpx serif;
}
.list-content-select{
	text-align: center;
	color: #fcbd71;
	/* background-color: #a0cfff; */
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	flex: 3;
},
.list-content-unselect{
	text-align: center;
	color: #FFFFFF;
	/* background-color: #2B85E4; */
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	flex: 3;
}
.itemclassb{
	background-color:#CCFFFF;
}
.qiun-padding{padding:2%; width:96%;}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex; flex-direction:column !important;}
.qiun-common-mt{margin-top:10upx;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 10upx solid #2979FF; padding-left: 10upx; font-size: 32upx;color: #000000}
.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF; margin-top:30upx;}
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>